<template>
	<view class="content">
		<swiper class="swiper" 
			:autoplay="autoplay" 
			:duration="duration"
			:indicator-dots="false"
			indicator-color="#eefefd"
			:indicator-active-color="iActiveColor"
			:current="currentIndex"
			@change="swiperChange"
		>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="../../static/imgs/guide/guide11.jpg" mode="scaleToFill"></image></view>
				</view>
				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="../../static/imgs/guide/guide22.jpg" mode="scaleToFill"></image></view>
				</view>
				<view class="jump-over jump-over2" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="../../static/imgs/guide/guide33.jpg" mode="scaleToFill"></image></view>
				</view>
				<view class="start-music" @tap="launchFlag()">开启音乐之旅</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: false,
				duration: 500,
				jumpover: '跳 过',
				currentIndex: 0,
			}
		},
		methods: {
			launchFlag(){
				uni.setStorage({
					key: 'launchTime',
					data: new Date().getTime(),
				});
				const value = uni.getStorageSync('userInfo');
				// 没登录了就跳转到登录页，登录了就跳转到主页面
				if (!value) {
					uni.redirectTo({
						url: '/pages/login/index',
					});
				} else {
					uni.redirectTo({
						url: '/pages/index/main',
					});
				}
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			}
		},
		computed: {
			iActiveColor() {
				switch(this.currentIndex) {
					case 0: return '#f58080';
					case 1: return '#5663b1';
					case 2: return '#1b7c95';
					default: return '#f58080';
				}
			}
		}
	}
</script>
<style>
	page,
	.content{
		width: 100%;
		height: 100%;
		background-size: 100% auto ;
		padding: 0;
	}
	.swiper{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
		text-align: center;
		position: relative;
		display: flex;
	}
	.swiper-item-img{
		width: 100%;
		height: 100%;
	}
	.swiper-item-img image{
		width: 100%;
		height: 100%;
	}
	
	.jump-over{
		position: absolute;
		left: 30upx;
		top: 60upx;
		padding: 6upx 15upx;
		border-radius: 24upx;
		font-size: 24upx;
		color: #fff;
		background: linear-gradient(to right,#ffa291,#ffdfc9);
		z-index: 999;
	}
	.jump-over.jump-over2{
		background: linear-gradient(to right,#9bb0e2,#d7e4f5);
	}
	.start-music{
		position: absolute;
		left: 50%;
		bottom: 120upx;
		transform: translateX(-50%);
		padding: 16upx 40upx;
		color: #fff;
		background: #7bccd1;
		border-radius: 16upx;
		font-size: 32upx;
		letter-spacing: 4upx;
	}
</style>
